<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no"/>
<title>全部商品</title>
<link href="/static/webAPP/css/reset.css" rel="stylesheet" type="text/css">
<link href="/static/webAPP/css/classify.css" rel="stylesheet" type="text/css">
<script src="/static/webAPP/lib/mobile/layer.js"></script>
<script src="/static/webAPP/js/base.js"></script>
</head>
<body>
<div class="near-box">
	<div class="yx-index-top">
	  	 <div class="index-top-box2">
	  	 	 <span class="fresh-toptext1">分类商品列表</span>
	  	 	 <span class="fresh-topimg1"></span>
	  	 </div>
	  </div>
	<div class="classify-bigbox">
	    <div class="classify-left classify-left_info">
	    	
	    </div>
	    <div class="classify-right content2">
	    	
	    </div>
	    
	    
	    
	</div>
	
	<!--底部-->
	<div class="kaola-bottom">
		<a href="./index.html" class="kaola-bottom-box1">
			<span class="kaola-bottom-img1"><img src="/static/webAPP/images/home2.png"></span>
			<span class="kaola-bottom-text1">首页</span>
		</a>
		<a href="./classify.html" class="kaola-bottom-box1">
			<span class="kaola-bottom-img1"><img src="/static/webAPP/images/fenlei2.png"></span>
			<span class="kaola-bottom-text1 text2">分类</span>
		</a>
		<a href="./shoping-cart.html" class="kaola-bottom-box1">
			<span class="kaola-bottom-img1"><img src="/static/webAPP/images/shop-cart1.png"></span>
			<span class="kaola-bottom-text1">购物车</span>
		</a>
		<a href="./personal-center.html" class="kaola-bottom-box1">
			<span class="kaola-bottom-img1"><img src="/static/webAPP/images/people1.png"></span>
			<span class="kaola-bottom-text1">我的</span>
		</a>
	</div>
</div>
<script src="/static/webAPP/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	function switab(tab,con,tab_c_css,tab_n_css,no) {  
    $(tab).each(function(i){  
        if(i == no)  
        {  
            $(this).addClass(tab_c_css);  
        }else  
        {  
            $(this).removeClass(tab_c_css);  
            $(this).addClass(tab_n_css);  
        }  
    })  
    if (con)  
    {  
        $(con).each(function(i){  
            if(i == no)  
            {  
                $(this).show();  
            }else  
            {  
                $(this).hide();  
            }  
        })  
    }  
}  
$(document).ready(function(){
    $(".classify-text1").each(function(i){
        $(this).click(function(){
            switab('.classify-text1','.content2','pitch-on2','',i);        
        })
    })
});
$(".price").click(function () {
        $(this).children(".sort-img").hide();
        $(this).children(".sort-img2").show();
        $(this).children(".sort-img2").toggleClass("img3");
	});
$(".classifyrt-text1").click(function () {
        $(this).addClass("tcolor-yellow");
        $(this).siblings(".classifyrt-text1").removeClass("tcolor-yellow");
	});
$(".list-show").click(function () {
        $(this).parent(".classify-right-title").next(".classify-list").slideToggle();
	});
</script>

<script>
	$(function(){
		var areaId = sessionStorage.getItem("citycode")
		if (areaId == '' || areaId == undefined || areaId == null) {
			areaId = 127
		}
		var tag = '<div class="classify-perch"></div>'
		var goodslength
		var classIdFirst
		if (goodslength == 0) {
			$(".content2").html(tag +'<div class="classify-perch2" style="margin-top:20px;text-align: center;color:#ccc">该地区未有此分类商品</div><div class="classify-perch2"></div>')
			return
		}
		$.ajax({
			type: "get",
						//TODO:
			url: "/api/getCategories",
			data: '',
			async : false,
			dataType: "json",
			success: function(mag){
				var data = mag.data
				var tag = '<div class="classify-perch"></div>'
				classIdFirst = data[0].id
				for (let i = 0; i < data.length; i++) {
					if (i == 0) {
						var tag1 = '<a href="javascript:void(0);" cid="'+ data[0].id +'" class="classify-text1 pitch-on2">'+ data[0].categoryName +'</a>'
					} else {
						var tag1 = '<a href="javascript:void(0);" cid="'+ data[i].id +'" class="classify-text1">'+ data[i].categoryName +'</a>'
					}
					tag += tag1
				}
				$(".classify-left_info").html(tag +'<div class="classify-perch2"></div>')
			}
		})
		$.ajax({
			type: "get",
							//TODO:
			url: "/app/commodityInfo/getCommodityInfoByCategory2/"+ areaId +"/"+ classIdFirst +"/1",
			async : false,
			data: '',
			dataType: "json",
			success: function(mag){
				var data = mag.data
				goodslength = data.length
				for (let i = 0; i < data.length; i++) {
					var tag1 = '<div class="classify-box1"><a href="./goods-details.html?id='+ data[i].id +'" class="classify-box1-img1"><img src="https://vm.fowotek.com/'+ getSmallUrl(data[i].picture_url) +'" alt=""></a><div class="classify-box2" cid="'+ data[i].id +'" specificationsid="'+ data[i].specification_id +'"><a href="./goods-details.html?id='+ data[i].id +'" class="classify-box2-text1">'+ data[i].commodityName +'</a><span class="classify-box2-text2">￥'+ data[i].price +'</span><span class="classify-box2-text3">'+ data[i].specifications +'</span><a href="javascript:void(0);" class="classify-box2-btn"><img src="./images/bottom-cart.png"></a></div></div>'
					tag += tag1
				}
				$(".content2").html(tag + '<div class="classify-perch2"></div>')
				
				var num = 1
				$(".content2").unbind("scroll").bind("scroll", function(e){  
					var sum = this.scrollHeight;  
					if (sum <= $(this).scrollTop() + $(this).height() + 1) {  
						if (goodslength == 10) {
							num ++;
							goodsList(areaId,classIdFirst,num)
						}else{
							$(".content2").html(tag + '<div class="classify-perch2" style="margin-top:20px;text-align: center;color:#ccc">已加载全部商品</div><div class="classify-perch2"></div>')
						}
					}  
				});
			},
			error:function(){
				$(".content2").html(tag +'<div class="classify-perch2" style="margin-top:20px;text-align: center;color:#ccc">未获取到定位信息</div><div class="classify-perch2"></div>')
			}
		})
		// goodsList(4,1)
		// classList(4)

		$(document).on('click','.classify-text1',function(){
			tag = '<div class="classify-perch"></div>'
			var category = $(this).attr("cid")
			goodsList(areaId,category,1)
			classList(category)
			var num = 1
			$(".content2").unbind("scroll").bind("scroll", function(e){  
				var sum = this.scrollHeight;  
				if (sum <= $(this).scrollTop() + $(this).height() + 1) {  
					if (goodslength == 10) {
						num ++;
						goodsList(areaId,category,num)
					}else{
						$(".content2").html(tag + '<div class="classify-perch2" style="margin-top:20px;text-align: center;color:#ccc">已加载全部商品</div><div class="classify-perch2"></div>')
					}
				}  
			});
		})

		
		$(document).off('click','.classify-box2-btn').on('click','.classify-box2-btn',function(){
			var id = $(this).closest(".classify-box2").attr("cid")
			
			//加入购物车
			var userName = sessionStorage.getItem("sessionName")
			var specificationsid = $(this).closest(".classify-box2").attr("specificationsid")
			if (userName == null || userName == '' || userName == undefined) {
				layer.open({
					content: '请先去登录账号',
					skin: 'msg',
					time: 2 //2秒后自动关闭
				});
			}else{
				$.ajax({
					type: "get",
										//TODO:
					url: "/app/userInfo/" + userName,
					data: '',
					dataType: "json",
					success: function(mag){
						// console.log(mag)
						$.ajax({
							type: "post",
									//TODO:
							url: "/app/basket/addCommodityToBasket",
							data: {commodity_id: id,commodity_specification_id: specificationsid,count: 1,user_id: mag.data.id},
							dataType: "json",
							success: function(res){
								layer.open({
									content: res.message,
									skin: 'msg',
									time: 2 //2秒后自动关闭
								});
							}
						})
					},
					error: function(){
						layer.open({
							content: '登录状态失效，请重新登录',
							skin: 'msg',
							time: 2 //2秒后自动关闭
						});
					}
				})
			}
		})

		function classList(category_id) {
			$.ajax({
				type: "get",
							//TODO:
				url: "/api/getCategories",
				data: '',
				dataType: "json",
				success: function(mag){
					var data = mag.data
					var tag = '<div class="classify-perch"></div>'
					for (let i = 0; i < data.length; i++) {
						if (category_id == data[i].id) {
							var tag1 = '<a href="javascript:void(0);" cid="'+ data[i].id +'" class="classify-text1 pitch-on2">'+ data[i].categoryName +'</a>'
						} else {
							var tag1 = '<a href="javascript:void(0);" cid="'+ data[i].id +'" class="classify-text1">'+ data[i].categoryName +'</a>'
						}
						tag += tag1
					}
					$(".classify-left_info").html(tag +'<div class="classify-perch2"></div>')
				}
			})
		}
		
		function goodsList(areaId,category_id,num) {
			$.ajax({
				type: "get",
							//TODO:
				url: "/app/commodityInfo/getCommodityInfoByCategory2/"+ areaId +"/"+ category_id +"/"+ num,
				async : false,
				data: '',
				dataType: "json",
				success: function(mag){
					var data = mag.data
					goodslength = data.length
					for (let i = 0; i < data.length; i++) {
						var tag1 = '<div class="classify-box1"><a href="./goods-details.html?id='+ data[i].id +'" class="classify-box1-img1"><img src="https://vm.fowotek.com/'+ getSmallUrl(data[i].picture_url) +'" alt=""></a><div class="classify-box2" cid="'+ data[i].id +'" specificationsid="'+ data[i].specification_id +'"><a href="./goods-details.html?id='+ data[i].id +'" class="classify-box2-text1">'+ data[i].commodityName +'</a><span class="classify-box2-text2">￥'+ data[i].price +'</span><span class="classify-box2-text3">'+ data[i].specifications +'</span><a href="javascript:void(0);" class="classify-box2-btn"><img src="./images/bottom-cart.png"></a></div></div>'
						tag += tag1
					}
					$(".content2").html(tag + '<div class="classify-perch2"></div>')
				}
			})
		}
		
	})
</script>
</body>
</html>